<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h = "http://java.sun.com/jsf/html"
      xmlns:f = "http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </h:head>
    <h:body>
        <!-- Shows the content of the cart.
            Content can be modified.
            Any item in the cart can be increased, decreased and removed-->
        <ui:composition template="/WEB-INF/facelets/template.xhtml">
            <ui:param name="title" value = "Shopping Cart - Chalmers Food Store" />
            <ui:define name="content">
                <br/>
                <h1>Items in cart:</h1>
                <hr/>
                <h:form>
                    <!-- Name -->
                    <p:dataTable value="#{shoppingCartModelBean.cart}" var="item">
                        <p:column sortBy="#{item.product.name}"> 
                            <f:facet name="header">
                                <h:outputText value="Name" />
                            </f:facet>
                            <h:outputText value="#{item.product.name}" />
                        </p:column>
                        <!-- Category -->
                        <p:column sortBy="#{item.product.cat}">
                            <f:facet name="header">
                                <h:outputText value="Category" />
                            </f:facet>
                            <h:outputText value="#{item.product.cat}" />
                        </p:column>
                        <!-- Description -->
                        <p:column sortBy="#{item.product.desc}"> 
                            <f:facet name="header">
                                <h:outputText value="Description" />
                            </f:facet>
                            <h:outputText value="#{item.product.desc}" />
                        </p:column>
                        <!-- Price -->
                        <p:column sortBy="#{item.product.price}">
                            <f:facet name="header">
                                <h:outputText value="Unit Price" />
                            </f:facet>
                            <h:outputText value="#{item.product.price}" />
                        </p:column>
                        <!-- Quantity -->
                        <p:column sortBy="#{item.quantity}">
                            <f:facet name="header">
                                <h:outputText value="Quantity" />
                            </f:facet>
                            <h:outputText value="#{item.quantity}" />
                        </p:column>
                        <!-- Increase by one -->
                        <p:column>
                            <p:commandButton value="+1" actionListener="#{shoppingCartModelBean.addProduct(item.product)}" update="@form, :cartInfo"/>
                        </p:column>
                        <!-- Decrease by one -->
                        <p:column>
                            <p:commandButton value="-1" actionListener="#{shoppingCartModelBean.removeOne(item.product)}" update="@form, :cartInfo" />
                        </p:column>
                        <!-- Remove all -->
                        <p:column>
                            <p:commandButton value="Remove All" actionListener="#{shoppingCartModelBean.removeAll(item.product)}" update ="@form, :cartInfo" />
                        </p:column>
                    </p:dataTable>
                    <!-- Remove all items in the cart -->
                    <br/>
                    <p:commandButton value="Empty Cart" actionListener="#{shoppingCartModelBean.emptyCart()}" update="@form, :cartInfo" />
                </h:form>
                <br/>
                <h:link value="Return to start page" outcome="goToStart" />
            </ui:define>
        </ui:composition>
    </h:body>
</html>
